import React from "react";
import { Image, Rate } from "antd-mobile";
import { Comment } from "@/type/GoodDetailType";
import "./EvaluateItem.scss";

interface EvaluateItemProps {
   comment: Comment;
}

const EvaluateItem: React.FunctionComponent<EvaluateItemProps> = ({ comment }) => {

   const renderImages = () => {
      if (comment.images?.length) {
         return (
            <div className="images">
               {
                  comment?.images?.map((item, index) => <Image src={item.image_url} key={index}></Image>)
               }
            </div>
         );
      }
   };
   return (
      <div className="evaluate-item">
         <div className="name">
            <div className="avatar">
               <Image src={comment?.user?.avatar_url || ""} alt="" />
               <span>{comment?.user?.nick_name}</span>
            </div>
            <Rate style={{ "--star-size": "14px" }} defaultValue={comment?.score}></Rate>
         </div>
         <div className="com-mes ellipsis-multi">{comment.content}</div>
         {renderImages()}
         <div className="date">{comment.create_time}</div>
      </div>
   );
};

export default EvaluateItem;
